<template>
	 <!-- :style="{ background: background }" -->
	<view class="_teacher_mini u-flex u-flex-between u-flex-items-center"
		@click="goTeacher">
		<view class="_left u-flex u-flex-between u-flex-items-center">
			<up-avatar :size="48"
				:src="teacher.avatar+ '?x-oss-process=image/resize,w_220,m_lfit/crop,g_north,h_180,w_180'"></up-avatar>
			<view class="_l_area u-m-l-20">
				<view class="_name">{{ teacher?.name }}</view>
				<view class="f-s-12 u-m-t-4 u-content-color">{{ teacher?.label }}</view>
			</view>
		</view>
		<u-icon name="arrow-right" color="#333" :size="16"></u-icon>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';
	const props = defineProps({
		teacher: Object,
		background: {
			type: String,
			default: '#F5F8FA'
		}
	})

	function goTeacher() {
		uni.navigateTo({
			url: '/subPackages/teacher/index?userId=' + props.teacher.userId
		})
	}
</script>

<style lang="scss" scoped>
	._teacher_mini {
		border-radius: 16rpx;
		padding: 10px 16px;
		background-image: url(https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2024/09/03/png/mini-bg_20240903140351A016.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	._name {
		font-weight: bolder;
		height: 48rpx;
		font-size: 28rpx;
		color: #000000;
		line-height: 48rpx;
	}
</style>